<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Canvas 绘制阴影</title>
	<style>
		body {
			background: #666;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		canvas {
			background: #fff;
		}

		h1 {
			color: #fff;
			font-size: 24px;
		}
	</style>
</head>

<body>
	<h1>阴影</h1>
	<canvas width="500" height="900"></canvas>
	<script>
		/** @type {HTMLCanvasElement} */ // 提示补全

		const canvas = document.querySelector('canvas');
		const ctx = canvas.getContext('2d');

		const drawTable = () => {
			let gap = 50
			let column = Math.floor(canvas.width / gap)
			let row = Math.floor(canvas.height / gap)
			let max = Math.max(column, row)
			for (let i = 0; i < max; i++) {
				let x = i * gap + gap
				ctx.beginPath();
				ctx.moveTo(x, 0)
				ctx.lineTo(x, canvas.height)
				let y = i * gap + gap
				ctx.moveTo(0, y)
				ctx.lineTo(canvas.width, y)
				ctx.strokeStyle = 'rgba(0,0,0,.2)';
				ctx.stroke()
			}
		};
		drawTable();
	</script>
</body>

</html>